<template>
  <div class="in-block">
    <div class="title">基本信息</div>
    <HkForm
      ref="hkFormRef"
      :form-labels="formObj.formLabels"
      :rules="formObj.formRules"
      :data="formData"
      :dict-list="formData.dictList"
      :btn-hidden="true"
      @handleEvent="handleEvent"
    >
      <template #filter-name>
        <el-input v-model="formData.name" placeholder="请输入规则名称" :disabled="title=='编辑'" :rules="formObj.formRules.name" maxlength="40" />
      </template>
      <!--      <template #filter-entityType>-->
      <!--        <el-select v-model="formData.entityType" placeholder="请选择规则分类" style="width: 100%" filterable @change="val=>$emit('selectType',val)">-->
      <!--          <el-option-->
      <!--            v-for="item in formData.dictList.entityTypeList"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value"-->
      <!--          />-->
      <!--        </el-select>-->
      <!--      </template>-->
    </HkForm>
  </div>
</template>
<script>
import HkForm from '@/components/Hk-Form/index.vue'
export default {
  components: { HkForm },
  props: {
    form: {
      type: Object,
      default: () => {
        return {
          name: '',
          entityType: '',
          ruleCategory: '',
          dataType: '',
          timeoutCycle: '',
          ruleType: '',
          kpiCode: ''
        }
      }
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      islink: 0,
      radio: 2,

      // 查询对象
      formObj: {
        formLabels: [
          {
            label: '规则名称',
            field: 'name',
            type: 'slot',
            span: 18
          },
          // {
          //   label: '规则分类',
          //   field: 'entityType',
          //   span: 18,
          //   type: 'slot'
          // },
          {
            label: '规则说明',
            field: 'ruleDeclaration',
            type: 'textarea',
            maxlength: 200,
            span: 18
          }
        ],
        // 表单校验
        formRules: {
          name: [{ required: true, message: '不能为空', trigger: 'blur' }, { min: 1, max: 100, message: '不可以超过100个字符', trigger: 'blur' }],
          // entityType: [{ required: true, message: '不能为空' }],
          ruleCategoryAlias: [{ required: true, message: '不能为空', trigger: 'change' }],
          ruleType: [{ required: true, message: '不能为空', trigger: 'change' }],
          dataType: [{ required: true, message: '不能为空', trigger: 'change' }]
        }
      }
    }
  },
  computed: {
    formData: {
      get() {
        return this.form
      },
      set() {}
    }
  },

  watch: {},

  created() {},
  mounted() {},

  methods: {
    /**
     * 表单变化事件
     * */
    handleEvent(data) {
      // this.formData[data.field] = data.value;
    },
    resetFields() {
      this.$refs['hkFormRef'].resetForm('formLabels')
    },

    // // 提交事件
    async submit() {
      const child = this.formData.dictList.ruleCategoryList.filter((item) => {
        return item.value === this.formData.ruleCategory
      })
      this.formData.ruleCategoryAlias = child[0]?.label
      const res = await this.$refs.hkFormRef.handleFormSubmit('formLabels')
      this.formData = Object.assign({ }, this.formData, res)
      this.formData.entityType = 'host'
      const ruleEntity = {
        ruleEntity: this.formData
      }
      return new Promise((resolve, reject) => {
        resolve(ruleEntity)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.in-block{
  padding-bottom: 10px !important;
}
::v-deep{
.el-row,.el-col{
  margin: 0 !important;
  padding: 0 !important;
}
.el-form-item{
  margin: 10px 0;
}
}
</style>
